<!DOCTYPE html>
<html>
<head>
    <#include "/includes/base.ftl"/>
</head>
<body>
<div class="near-box">
    <div class="yx-index-top">
        <div class="index-top-box2">
            <span class="fresh-toptext1">测试商户</span>
            <#--<span class="fresh-topimg1"></span>-->
        </div>
        <div class="index-top-box1">
            <span class="index-top-img1"><img src="./images/search3.png" alt=""></span>
        </div>
    </div>
    <div class="classify-bigbox">
        <div class="classify-left">
            <div class="classify-perch"></div>
            <#list shopGoodsTypeList as sgt>
                <span class="classify-text1" id="${sgt.id}">${sgt.typeName}</span>
            </#list>


            <div class="classify-perch2"></div>
        </div>
        <div class="classify-right content2">
            <div class="classify-perch-r"></div>
            <div class="classify-right-title">
                <span class="classifyrt-text1">综合排序</span>
                <#--<span class="classifyrt-text1 price">按价格<i class="sort-img"></i><i class="sort-img2"
                                                                                   style="display: none;"></i></span>
                <span class="classifyrt-text1 list-show">分类</span>-->
            </div>
            <#--<div class="classify-list" style="display: none;">
                <span class="classify-list-text1 pitch-on-cl">全部分类</span>
                <span class="classify-list-text1">进口水果</span>
                <span class="classify-list-text1">国产水果</span>
                <span class="classify-list-text1">柑橘橙柚</span>
                <span class="classify-list-text1">苹果/梨</span>
                <span class="classify-list-text1">桃杏梅枣</span>
            </div>-->
            <!--商品列表循环-->
            <div id="goodsId"></div>
            <!--商品列表循环-->
            <div class="classify-perch2"></div>
        </div>

    </div>

</div>
<!--底部-->
<#include "/includes/footer.ftl"/>
</div>
<script type="text/javascript">

    $(document).ready(function () {
        $('#bottomId .kaola-bottom-text1').eq(0).addClass('text2');
        $('#search').attr('src', '/static/index/images/search2.png');
        $(".classify-text1").click(function () {
            $(this).addClass("pitch-on2").siblings().removeClass("pitch-on2");
            $.post('/goods/shopGoods/getShopGoods', {goodsTypeId: $(this).attr('id')}, function (data) {
                if (data.status == 200) {
                    var html = '';
                    for (let i = 0; i < data.data.length; i++) {
                        var line = data.data[i];
                        var goodsCount = changeGoodsFun.getGoodsCount(line.id);
                        console.log(goodsCount);
                        html += `<div class="classify-box1">
                            <a href="javascript:void(0)" class="classify-box1-img1"><img src="${r'${line.shopGoodsImg}'}" alt=""></a>
                            <div class="classify-box2">
                                <a href="javascript:void(0)" class="classify-box2-text1">${r'${line.shopGoods}'}</a>
                                <span class="classify-box2-text2">${r'${line.shopGoodsPrice / 100}'}</span>
                                <div class="shop-cart-box3">
                                    <span class="shop-cart-subtract" onclick="changeGoodsFun.subtract(this,${r'${line.id}'} )"></span>
                                            <input type="tel" size="4" value="${r'${goodsCount}'}" id="tb_count" class="shop-cart-numer">
                                            <span class="shop-cart-add" onclick="changeGoodsFun.add(this, ${r'${line.id}'} )"></span>
                                </div>
                            </div>
                        </div>`
                    }
                    $('#goodsId').html(html);
                }
            });

        });
        $(".classify-text1").eq(0).click();
    });
    var changeGoodsFun = {
        subtract(obj, id) {
            var count = $(obj).next().val();
            count--;
            if (count <= 0) {
                count = 0;
            }
            $(obj).next().val(count);
            this.totalPrice(id, count);
        },
        add(obj, id) {
            var count = $(obj).prev().val();
            count++;
            $(obj).prev().val(count);
            this.totalPrice(id, count);
        },
        getGoodsCount(id) {
            var jsonStr = cookieFun.getCookie('goods');
            if (jsonStr == null) {
                return 0;
            }
            for (let i = 0; i < jsonStr.length; i++) {
                if (jsonStr[i].id == id) {
                    return jsonStr[i].count;
                }
            }
            return 0;
        },
        totalPrice(id, count) {
            var jsonStr = cookieFun.getCookie('goods');

            function getJsonItem() {
                var jsonStrItem = new Object();
                jsonStrItem.id = id;
                jsonStrItem.count = count;
                console.log(cookieFun.getCookie('goods'));
                return jsonStrItem;
            }

            if (jsonStr == null) {
                jsonStr = new Array();
                var jsonStrItem = getJsonItem();
                jsonStr.push(jsonStrItem);
                cookieFun.setCookie('goods', jsonStr);
                return;
            }
            var isExit = false;

            for (let i = 0; i < jsonStr.length; i++) {
                if (jsonStr[i].id == id) {
                    jsonStr[i].count = count;
                    if (count == 0) {
                        jsonStr.splice(i, 1);
                    }
                    cookieFun.setCookie('goods', jsonStr);
                    isExit = true;
                }
            }
            console.log(jsonStr);
            if (!isExit) {
                var jsonStrItem = getJsonItem();
                jsonStr.push(jsonStrItem);
                cookieFun.setCookie('goods', jsonStr);
            }
            //console.log(cookieFun.getCookie('goods'));
        }
    }
</script>
</body>
</html>